<template>
  <div class="function-btn-com">
    <div class="left-btn">
      <div class="graph-load-data" @click="showLoadData()">
        <a-icon type="plus" />
        载入数据
      </div>
      <span class="divider"></span>
      <!--
      <a-tooltip placement="top">
        <template slot="title">
          <span>节点对比</span>
        </template>
        <div class="btn function-btn-spacing">
          <a-icon-font type="icontaosuo2"/>
        </div>
      </a-tooltip>
      -->
      <div class="tool-info">
        <div v-show="selectedTool !== ''" class="selected-tool-info">
          <span class="text">{{ selectedTool }}</span>
        </div>
        <!-- 箭头选择 -->
        <a-slider
          v-show="selectedTool === '选择'"
          v-model="selectRadius"
          class="radius-slider"
          :min="1"
          :max="200"
          @afterChange="changeRadius"
        />
        <span v-show="selectedTool === '选择'" class="divider"></span>
        <a-checkbox
          v-show="selectedTool === '选择'"
          v-model="settings.selectNeighbors"
          class="text"
          @change="changeNeighborState"
          >自动选中邻居节点
        </a-checkbox>

        <!-- 手型拖动 -->
        <!--
        <a-slider
          v-show="selectedTool === '拖动'"
          class="radius-slider"
          :min="1"
          :max="200"
          :default-value="1"
          @afterChange="changeRadius"
        />
        -->

        <!-- 框选 套索 -->
        <a-checkbox
          v-show="selectedTool === '框选' || selectedTool === '套索'"
          v-model="settings.lassoNeighbors"
          class="text"
          @change="changeNeighborState"
          >自动选中邻居节点
        </a-checkbox>

        <!-- 着色 -->
        <a-slider
          v-show="selectedTool === '着色'"
          v-model="colorRadius"
          class="radius-slider"
          :min="1"
          :max="200"
          @afterChange="changeRadius"
        />
        <span v-show="selectedTool === '着色'" class="divider"></span>
        <a-dropdown v-show="selectedTool === '着色'" :trigger="['click']">
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.selectedColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.drawColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>

        <!-- 格式刷 -->
        <a-dropdown v-show="selectedTool === '格式刷'" :trigger="['click']">
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.formatColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.formatColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>
        <span v-show="selectedTool === '格式刷'" class="divider"></span>
        <a-select
          v-show="selectedTool === '格式刷'"
          v-model="settings.formatType"
          size="small"
          class="option-select text"
          @change="changeFormatType"
        >
          <a-select-option value="source">前者</a-select-option>
          <a-select-option value="target">后者</a-select-option>
          <a-select-option value="both">邻居</a-select-option>
          <a-select-option value="category">同类型</a-select-option>
        </a-select>

        <!-- 热区 -->
        <a-dropdown v-show="selectedTool === '热区'" :trigger="['click']">
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.heatmapColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.heatmapColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>

        <!-- 重设颜色 -->
        <a-dropdown v-show="selectedTool === '重设颜色'" :trigger="['click']">
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.redrawColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.redrawColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>

        <!-- 标签设置 -->
        <a-cascader
          v-show="selectedTool === '标签设置'"
          v-model="labelIsShow"
          :allow-clear="false"
          size="small"
          class="label-select text"
          :options="labelOptions"
          expand-trigger="hover"
          @change="changeLabelIsShow"
        />
        <span v-show="selectedTool === '标签设置'" class="tool-text text"
          >字号:</span
        >
        <a-select
          v-show="selectedTool === '标签设置'"
          v-model="settings.labelFontType"
          size="small"
          class="option-select text"
          @change="changeLabelFontType"
        >
          <a-select-option value="node">节点一致</a-select-option>
          <a-select-option value="self">固定尺寸</a-select-option>
        </a-select>
        <a-slider
          v-show="selectedTool === '标签设置'"
          v-model="labelFontSize"
          class="radius-slider"
          :disabled="fontTypeSliderClosed"
          :min="10"
          :max="30"
          @afterChange="changeLabelFontSize"
        />
        <span v-show="selectedTool === '标签设置'" class="tool-text text"
          >颜色：</span
        >
        <!--
        <a-select
          v-show="selectedTool === '标签设置'"
          size="small"
          default-value="self"
          @change="changeLabelColorType"
        >
          <a-select-option value="node">节点一致</a-select-option>
          <a-select-option value="self">自己设置</a-select-option>
        </a-select>
        -->
        <a-dropdown v-show="selectedTool === '标签设置'" :trigger="['click']">
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.labelColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.labelColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>

        <!-- 边设置 -->
        <a-select
          v-show="selectedTool === '边设置'"
          v-model="settings.edgeIsShow"
          size="small"
          class="edge-select text"
          @change="changeEdgeIsShow"
        >
          <a-select-option value="show">显示</a-select-option>
          <a-select-option value="notshow">不显示</a-select-option>
        </a-select>
        <span v-show="selectedTool === '边设置'" class="tool-text text"
          >颜色:</span
        >
        <a-select
          v-show="selectedTool === '边设置'"
          v-model="settings.edgeColorType"
          size="small"
          class="option-select text"
          @change="changeEdgeColorType"
        >
          <a-select-option value="self">自定义</a-select-option>
          <a-select-option value="node">节点一致</a-select-option>
        </a-select>
        <a-dropdown
          v-show="selectedTool === '边设置' && !colorSelectionClosed"
          :trigger="['click']"
        >
          <svg class="color-selection">
            <rect
              x="0"
              y="0"
              width="20"
              height="20"
              :fill="settings.edgeColor"
            />
          </svg>
          <div slot="overlay">
            <color-selection-panel
              :current-color="settings.edgeColor"
              @selectColor="changeColor"
            />
          </div>
        </a-dropdown>
        <span v-show="selectedTool === '边设置'" class="divider"></span>
        <span v-show="selectedTool === '边设置'" class="tool-text text"
          >标签设置:</span
        >
        <a-select
          v-show="selectedTool === '边设置'"
          v-model="settings.edgeLabelIsShow"
          size="small"
          class="option-select text"
          @change="changeEdgeLabelIsShow"
        >
          <a-select-option value="show">显示</a-select-option>
          <a-select-option value="notshow">不显示</a-select-option>
          <a-select-option value="highlightshow">高亮显示</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="right-btn">
      <a-tooltip placement="top">
        <template slot="title">
          <span>后退</span>
        </template>
        <div class="btn function-btn-spacing">
          <a-icon-font type="iconhoutui2" @click="undo" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template slot="title">
          <span>前进</span>
        </template>
        <div class="btn function-btn-spacing">
          <a-icon-font type="iconqianjin1" @click="redo" />
        </div>
      </a-tooltip>
      <!--  label  -->
      <a-tooltip placement="top">
        <template slot="title">
          <span>{{ graphInfoIsShow ? '隐藏概览' : '显示概览' }}</span>
        </template>
        <div class="btn function-btn-spacing">
          <a-icon-font
            v-if="graphInfoIsShow"
            type="icongailankaiqibeifen2"
            @click="changeGraphInfoIsShow"
          />
          <a-icon-font
            v-else
            type="icongailankaiqibeifen3"
            @click="changeGraphInfoIsShow"
          />
        </div>
      </a-tooltip>
      <span class="divider"></span>
      <!--  删除  -->
      <a-tooltip placement="top">
        <template slot="title">
          <span>删除</span>
        </template>
        <div class="btn function-btn-spacing">
          <a-icon-font type="iconicon-beifen5" @click="deleteItem" />
        </div>
      </a-tooltip>
      <span class="divider"></span>
      <!-- 保存  -->
      <a-dropdown>
        <a-tooltip placement="top">
          <template slot="title">
            <span>保存</span>
          </template>
          <div class="btn function-btn-spacing">
            <a-icon-font type="iconbaocun" />
          </div>
        </a-tooltip>
        <a-menu slot="overlay">
          <!-- <a-menu-item @click="saveWidget">保存到可视化</a-menu-item> -->
          <a-menu-item @click="download('json')">保存为JSON文件</a-menu-item>
          <a-menu-item @click="download('csv')">保存为CSV文件</a-menu-item>
          <a-menu-item @click="download('gml')">保存为GML文件</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <!-- 加载数据 -->
    <load-data-modal
      title="加载数据"
      :visible="loadDataShow"
      :project-id="projectId"
      @close="handleClose"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import LoadDataModal from '@/components/graph-analysis/LoadDataModal.vue'
import ColorSelectionPanel from '@/components/graph-analysis/ColorSelectionPanel.vue'
import GraphAnalysisStore from '@/store/modules/graphanalysis'
import { baseURL } from '@/api/axios-config'

@Component({
  components: {
    LoadDataModal,
    ColorSelectionPanel,
  },
})
export default class GraphAnalysisHeader extends Vue {
  @Prop({
    type: Number,
    default: 0,
  })
  projectId!: number

  public loadDataShow: boolean = false
  public checkIds: Array<number> = []

  private graphInfoIsShow: boolean = false

  private selectRadius: number = 1
  private colorRadius: number = 1

  private labelOptions = [
    {
      value: 'show',
      label: '显示',
      children: [
        {
          value: 'inner',
          label: '节点内部',
        },
        {
          value: 'outer',
          label: '节点外部',
        },
      ],
    },
    {
      value: 'notshow',
      label: '不显示',
    },
    {
      value: 'highlightshow',
      label: '高亮显示',
      children: [
        {
          value: 'inner',
          label: '节点内部',
        },
        {
          value: 'outer',
          label: '节点外部',
        },
      ],
    },
  ]

  private labelIsShow: any = ['show', 'outer']
  private labelFontSize = 12

  public mounted() {
    this.selectRadius = this.storeSelectRadius
    this.colorRadius = this.storeColorRadius
    this.labelIsShow = this.storeLabelIsShow.split('-')
    this.labelFontSize = this.storeLabelFontSize
  }

  public get settings() {
    return {
      selectNeighbors: GraphAnalysisStore.selectNeighbors,
      lassoNeighbors: GraphAnalysisStore.lassoNeighbors,
      selectedColor: GraphAnalysisStore.selectedColor,
      formatColor: GraphAnalysisStore.formatColor,
      formatType: GraphAnalysisStore.formatType,
      redrawColor: GraphAnalysisStore.redrawColor,
      labelIsShow: GraphAnalysisStore.labelIsShow,
      labelFontType: GraphAnalysisStore.labelFontType,
      labelColorType: GraphAnalysisStore.labelColorType,
      labelColor: GraphAnalysisStore.labelColor,
      edgeIsShow: GraphAnalysisStore.edgeIsShow,
      edgeLabelIsShow: GraphAnalysisStore.edgeLabelIsShow,
      edgeColorType: GraphAnalysisStore.edgeColorType,
      edgeColor: GraphAnalysisStore.edgeColor,
      heatmapColor: GraphAnalysisStore.heatmapColor,
    }
  }

  public changeGraphInfoIsShow() {
    this.graphInfoIsShow = !this.graphInfoIsShow
    GraphAnalysisStore.setGraphInfoIsShow(this.graphInfoIsShow)
  }

  // 弹出加载数据框
  public async showLoadData() {
    this.loadDataShow = true
  }

  public get selectedTool() {
    return GraphAnalysisStore.selectedTool
  }

  public get colorSelectionClosed() {
    return (
      this.selectedTool === '边设置' &&
      GraphAnalysisStore.edgeColorType === 'node'
    )
  }

  public get fontTypeSliderClosed() {
    return (
      this.selectedTool === '标签设置' &&
      GraphAnalysisStore.labelFontType === 'node'
    )
  }

  public get storeSelectRadius() {
    return GraphAnalysisStore.selectRadius
  }

  @Watch('storeSelectRadius')
  storeSelectRadiusChanged(value: number) {
    this.selectRadius = value
  }

  public get storeColorRadius() {
    return GraphAnalysisStore.colorRadius
  }

  @Watch('storeColorRadius')
  storeColorRadiusChanged(value: number) {
    this.colorRadius = value
  }

  public changeRadius(value: number) {
    if (this.selectedTool === '选择') {
      GraphAnalysisStore.setSelectRadius(value)
    } else if (this.selectedTool === '拖动') {
      GraphAnalysisStore.setDragRadius(value)
    } else if (this.selectedTool === '着色') {
      GraphAnalysisStore.setColorRadius(value)
    }
    GraphAnalysisStore.setNeedSave(true)
  }

  public changeNeighborState(event: any) {
    if (this.selectedTool === '选择') {
      GraphAnalysisStore.setSelectNeighbors(event.target.checked)
    } else if (this.selectedTool === '框选' || this.selectedTool === '套索') {
      GraphAnalysisStore.setLassoNeighbors(event.target.checked)
    }
    GraphAnalysisStore.setNeedSave(true)
  }

  public changeColor(value: string) {
    GraphAnalysisStore.setManualAction(true)
    if (this.selectedTool === '着色') {
      GraphAnalysisStore.setSelectedColor(value)
      GraphAnalysisStore.setNeedSave(true)
    } else if (this.selectedTool === '格式刷') {
      GraphAnalysisStore.setFormatColor(value)
      GraphAnalysisStore.setNeedSave(true)
    } else if (this.selectedTool === '重设颜色') {
      GraphAnalysisStore.setRedrawColor(value)
      GraphAnalysisStore.setNeedRedraw(true)
    } else if (this.selectedTool === '标签设置') {
      GraphAnalysisStore.setManualAction(true)
      GraphAnalysisStore.setLabelColor(value)
    } else if (this.selectedTool === '边设置') {
      GraphAnalysisStore.setManualAction(true)
      GraphAnalysisStore.setEdgeColor(value)
    } else if (this.selectedTool === '热区') {
      GraphAnalysisStore.setHeatmapColor(value)
      GraphAnalysisStore.setNeedSave(true)
    }
  }

  public changeFormatType(type: string) {
    GraphAnalysisStore.setFormatType(type)
    GraphAnalysisStore.setNeedSave(true)
  }

  public get storeLabelIsShow() {
    return GraphAnalysisStore.labelIsShow
  }

  public changeLabelIsShow(value: Array<string>) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setLabelIsShow(value.join('-'))
  }

  @Watch('storeLabelIsShow')
  labelIsShowChanged(value: string) {
    this.labelIsShow = value.split('-')
  }

  public changeLabelFontType(value: string) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setLabelFontType(value)
  }

  public get storeLabelFontSize() {
    return GraphAnalysisStore.labelFontSize
  }

  public changeLabelFontSize(value: number) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setLabelFontSize(value)
  }

  @Watch('storeLabelFontSize')
  labelFontSizeChanged(value: number) {
    this.labelFontSize = value
  }

  /*
  public changeLabelColorType(value: string) {
    GraphAnalysisStore.setLabelColorType(value)
  }
  */

  public deleteItem() {
    GraphAnalysisStore.setDeleteItem(true)
  }

  public changeEdgeIsShow(value: string) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setEdgeIsShow(value)
  }

  public changeEdgeColorType(value: string) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setEdgeColorType(value)
  }

  public changeEdgeLabelIsShow(value: string) {
    GraphAnalysisStore.setManualAction(true)
    GraphAnalysisStore.setEdgeLabelIsShow(value)
  }

  /**
   * 关闭加载数据弹框
   * @param flag
   */
  public handleClose(flag: boolean) {
    this.loadDataShow = flag
  }

  public async saveWidget() {
    const response = await GraphAnalysisStore.saveToVis()
    if (response.data.code === 100) {
      this.$message.success('已保存到可视化视图，请到可视化组件中查看')
    }
  }

  public async download(format: string) {
    window.open(
      `${baseURL}/graphAnalysis/download?graphId=${GraphAnalysisStore.activeTabId}&format=${format}`
    )
  }

  public async redo() {
    GraphAnalysisStore.setGraphAnalysisLoading(true)
    GraphAnalysisStore.setManualAction(false)
    GraphAnalysisStore.setUndoRedoStatus('redo')
    await GraphAnalysisStore.redoAction()
    GraphAnalysisStore.setGraphAnalysisLoading(false)
  }

  public async undo() {
    GraphAnalysisStore.setGraphAnalysisLoading(true)
    GraphAnalysisStore.setManualAction(false)
    GraphAnalysisStore.setUndoRedoStatus('undo')
    await GraphAnalysisStore.undoAction()
    GraphAnalysisStore.setGraphAnalysisLoading(false)
  }
}
</script>

<style scoped lang="less">
/* 功能按钮 */
.function-btn-com {
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;
  display: flex;
  height: 38px;
  justify-content: space-between;
  padding: 0 10px;

  .left-btn,
  .right-btn {
    align-items: center;
    display: flex;

    .btn {
      align-items: center;
      border-radius: 2px;
      color: #5d637e;
      cursor: pointer;
      display: flex;
      font-size: 16px;
      padding: 4px;
      position: relative;

      &:hover {
        background-color: #f1f1f1;
        color: #6973ff;
      }
    }

    .divider {
      background-color: #5d637e;
      height: 16px;
      margin: 0 5px;
      width: 1px;
    }

    .graph-load-data {
      background-color: #fff;
      border: 1px solid #6771ff;
      border-radius: 12px;
      color: #6771ff;
      cursor: pointer;
      font-size: 16px;
      height: 24px;
      margin-right: 10px;
      text-align: center;
      width: 110px;

      &:hover {
        background-color: #6973ff;
        color: #fff;
      }
    }

    .function-btn-spacing {
      margin: 0 5px;
    }

    .tool-info {
      align-items: center;
      display: flex;

      .selected-tool-info {
        word-break: keep-all;

        span {
          margin-left: 5px;
          margin-right: 5px;
        }
      }

      .radius-slider {
        width: 80px;
      }
    }
  }
}

.color-selection {
  height: 20px;
  margin-left: 5px;
  width: 20px;
}

.label-select {
  width: 150px;
}

.tool-text {
  margin-left: 5px;
  margin-right: 5px;
  word-break: keep-all;
}

.option-select {
  width: 90px;
}

.edge-select {
  width: 70px;
}

.text {
  word-break: keep-all;
}
</style>
